// 由于 webpack 是基于node构建的，所以 webpack 的配置文件中，任何合法的node代码都是支持的
const path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
const htmlWebpackPlugin = require('html-webpack-plugin')

const vueLoaderPlugin = require('vue-loader/lib/plugin')

// 当以命令行形式运行 webpack 或者 webpack-dev-server 的时候，工具会发现我们并没有提供要打包文件的 入口和出口文件，此时会检查项目根
// 目录中的 webpack.config.js 这个配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个配置对象，精选打包构建
module.exports = {
    entry: path.join(__dirname, './src/main.js'),   //  设置入口文件的路径
    output:{
        path: path.join(__dirname, './dist'),   //  设置出口文件的路径
        filename:'bundle.js'    //  设置出口文件的名称
    },
    plugins:[   //  所有 webpack 插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),  //  指定模板文件路径
            filename:'index.html'   //  设置生成的内存页面的名字
        }),
        new vueLoaderPlugin()   //  设置 .vue 文件打包的插件
    ],
    module:{
        rules:[
            { test:/\.css$/ , use:['style-loader','css-loader']},
            { test:/\.less$/ , use:['style-loader','css-loader','less-loader']},
            { test:/\.scss$/ , use:['style-loader','css-loader','sass-loader']},
            { test:/\.(jpg|png|gif|jpeg|bmp)$/ , use:'url-loader?limit=64493&name=[hash:8]-[name].[ext]'},  //  处理图片路径的 loader
            // 在loader后面加上?则表示传递参数,limit这个参数的固定的，limit 给的值是图片的大小，单位是 byte，如果我们引用的图片大于
            // 给定的limit值，则不会被转为base64格式的字符串，如果图片小于或等于给定的limit值，则会被转为base94格式的字符串
            // 还有一个name参数，表示图片的名字 [name] 表示原图片的名字，[ext] 表示原图片的后缀，[hash:8]表示引用哈希值的前8位(最多32位)
            // name=[hash:8]-[name].[ext]这样拼接起来的意思就是最终网页中看到的图片url的地址为一个 8为的hash值-图片原名.后缀
            { test:/\.(ttf|eot|svg|woff|woff2)$/ , use:'url-loader'},    //  处理字体文件路径的 loader
            { test:/\.js$/ ,use:'babel-loader' , exclude:/node_modules/},
            { test:/\.vue$/ , use:'vue-loader'} // 处理 .vue 文件的 loader
        ] 
    },
    resolve:{
        alias:{ // 修改 Vue 被导入时候的包的路径
            // "vue$":'vue/dist/vue.js'
        }
    }
}